
  <div class="layui-row layui-col-space15" id="frontpage">
    <div class="layui-col-md8">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">WTM—做最好的.netcore开源框架</div>
            <div class="layui-card-body">

              <div class="layui-carousel layadmin-carousel " data-autoplay="true" data-anim="fade">
                <div carousel-item>
                  <div>
                    WalkingTec.Mvvm框架（简称WTM）最早开发与2013年，基于Asp.net MVC3 和 最早的Entity Framework,
                    当初主要是为了解决公司内部开发效率低，代码风格不统一的问题。经历了四年间数十个项目的考验，框架逐步的完善，推出了四个主要版本。
                  </div>
                  <div>
                    2017年9月，我们将代码移植到了.Net Core上，并进行了深度优化和重构，推出了基于Asp.net Core和EF
                    Core的全新框架，新框架在架构，稳定性，速度上都有长足进步，真正成为一款高效开发的利器。
                  </div>
                  <div>
                    框架已开源，欢迎大家提出宝贵意见 <a href="https://github.com/WalkingTec/WalkingTec.Mvvm"
                      target="_blank">https://github.com/WalkingTec/WalkingTec.Mvvm</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md6">
          <div class="layui-card">
            <div class="layui-card-header">WTM开源</div>
            <div class="layui-card-body">

              <div class="layui-carousel layadmin-carousel layadmin-backlog">
                <div carousel-item>
                  <ul class="layui-row layui-col-space10">
                    <li class="layui-col-xs6">
                      <a href="https://github.com/dotnetcore/WTM/stargazers" class="layadmin-backlog-body"
                        target="_blank">
                        <h3>Star</h3>
                        <p><cite id="githubstar"></cite></p>
                      </a>
                    </li>
                    <li class="layui-col-xs6">
                      <a href="https://github.com/dotnetcore/WTM/network/members" class="layadmin-backlog-body"
                        target="_blank">
                        <h3>Fork</h3>
                        <p><cite id="githubfork"></cite></p>
                      </a>
                    </li>
                    <li class="layui-col-xs6">
                      <a href="https://github.com/dotnetcore/WTM/watchers" class="layadmin-backlog-body"
                        target="_blank">
                        <h3>Watch</h3>
                        <p><cite id="githubwatch"></cite></p>
                      </a>
                    </li>
                    <li class="layui-col-xs6">
                      <a href="https://github.com/dotnetcore/WTM/issues" class="layadmin-backlog-body" target="_blank">
                        <h3>Issue</h3>
                        <p><cite id="githubissue"></cite></p>
                      </a>
                    </li>
                  </ul>
                  <ul class="layui-row layui-col-space10">
                    <li class="layui-col-xs12">
                      <span style="font-size:16px;line-height:50px;">WTM是纯开源免费框架，如果喜欢，来GitHub赏个星~~</span>

                      <p style="text-align:center">
                        <a href="https://github.com/dotnetcore/wtm" target="_blank"
                          style="background-color:#eee;background-image:linear-gradient(to bottom, #fcfcfc 0, #eee 100%);background-repeat:no-repeat;border:1px solid #d5d5d5;color:#333;padding:3px 10px 3px 8px;font-size:16px;line-height:22px">
                          <span width="20"
                            style="width:20px;height:20px;font-size:16px;line-height:22px;box-sizing:border-box; background-size:100% 100%; background-image:url('')">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                          <span>Stars <cite id="githubstars"></cite></span>
                        </a>
                      </p>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">WTM解决的问题</div>
            <div class="layui-card-body layadmin-takerates">
              WTM框架把常规编码结构化，重复编码自动化，极大地提高了开发效率<br />
              在不分离的模式下，它连通了前台UI和后台代码。你不需要前后台分离，不需要两个人配合，减少成本，缩短工期。<br />
              在前后端分离的模式下，同样可以使用代码生成器同时生成前台和后台的代码，极大的降低了前后端人员的沟通成本，从本质上提升了开发效率，让“分离”不再复杂和昂贵。
            </div>
          </div>
        </div>
        <div class="layui-col-md12">
          <div class="layui-card">
            <div class="layui-card-header">传说中的墙</div>
            <div class="layui-card-body layadmin-takerates">
              <table id="WTM-donate" lay-filter="WTM-donate"></table>
            </div>
          </div>
        </div>
        友情链接：<a href="https://www.layui.com/" target="_blank">LayUI</a> <a href="http://www.hzhcontrols.com" target="_blank">HZHControls</a>
      </div>
    </div>

    <div class="layui-col-md4">

      <div class="layui-card">
        <div class="layui-card-header">即刻体验WTM之美</div>
        <div class="layui-card-body layadmin-takerates">
          <h2 style="text-align:center;margin-top:20px">
            现在就点 <a href="/setup" target="_blank" style="color:#009688">这里</a> 立刻生成第一个WTM项目吧<br /><br />
          </h2>
          <h3 style="text-align:center;margin-top:0px">
            <a href="https://community.walkingtec.cn/" target="_blank" style="color:#009688">
              有问题？来WTM社区提问吧！
            </a>
          </h3>

        </div>
      </div>


      <div class="layui-card">
        <div class="layui-card-header">框架特点</div>
        <div class="layui-card-body layadmin-takerates">
          <ul>
            <li><i class="layui-icon layui-icon-ok"></i>一键生成WTM项目</li>
            <li><i class="layui-icon layui-icon-ok"></i>一键生成增删改查，导入导出，批量操作代码</li>
            <li><i class="layui-icon layui-icon-ok"></i>支持一对多，多对多关联模型的识别和代码生成</li>
            <li><i class="layui-icon layui-icon-ok"></i>支持分离(React+AntD,Vue+Element)和不分离(LayUI)两种模式</li>
            <li><i class="layui-icon layui-icon-ok"></i>支持sqlserver，mysql，pgsql三种数据库</li>
            <li><i class="layui-icon layui-icon-ok"></i>封装了Layui，AntD，Element的大部分控件，编写前台更加简便</li>
            <li><i class="layui-icon layui-icon-ok"></i>提供了很多基类，封装了绝大部分后台常用操作</li>
            <li><i class="layui-icon layui-icon-ok"></i>提供了用户，角色，用户组，菜单，日志等常用模块</li>
            <li><i class="layui-icon layui-icon-ok"></i>支持数据权限的开发和配置</li>
            <li><i class="layui-icon layui-icon-ok"></i>支持读写分离和数据库分库</li>
          </ul>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header">
          作者的话
          <i class="layui-icon layui-icon-tips" lay-tips="从善如登" lay-offset="5"></i>
        </div>
        <div class="layui-card-body layui-text layadmin-text">
          <p>
            WTM框架，全称WalkingTec
            MVVM（不是“我特么”的拼音首字母），WTM是一个快速开发框架，有多快？至少目前dotnetcore的开源项目中，我还没有见到更接地气，开发速度更快的框架。WTM的设计理念就是最大程度的加快开发速度，降低开发成本。
          </p>
          <p>
            国内Java一家独大原因很多，有BAT的示范效应，也有微软自己战略的失误。好在微软这两年终于想明白了， dotnet
            core的横空出世和收购github都是非常正确的方向。当然要想达到java一样的生态还有很长的路要走，那我就贡献一点绵薄之力吧。
          </p>
          <p>
            WTM开源以来，受到了越来越多开发者的喜爱，WTM必将以更加成熟稳定的姿态回报各位的喜爱。特别鸣谢贤心（<a href="http://www.layui.com/"
                                                                   target="_blank">layui.com</a>），授权WTM开发的项目可以免费使用其收费版的LayuiAdmin。提高自己，造福他人，吾道不孤！
          </p>
          <p>
            —— 框架开源地址：<a href="https://github.com/dotnetcore/WTM" target="_blank">https://github.com/dotnetcore/WTM</a>
          </p>
          <p>—— 框架在线文档：<a href="https://wtmdoc.walkingtec.cn" target="_blank">https://wtmdoc.walkingtec.cn</a></p>
          <p>
            —— 框架更新日志：<a href="https://github.com/dotnetcore/WTM/blob/develop/CHANGELOG.md" target="_blank">查看更新日志</a>
          </p>
          <p>—— 框架QQ交流群：694148336</p>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header">连接你我</div>
        <div class="layui-card-body" style="height:350px;">

          <div class="layui-carousel layadmin-carousel " data-autoplay="true" data-anim="fade">
            <div carousel-item style="height:350px;">
              <div style="height:400px;text-align:center">
                <img src="~/imgs/gongzhonghao.jpg" width="300" height="300" style="border:solid 1px #d5d5d5" /><br />
                <p>关注WTM微信公众号，及时了解框架更新</p>
                <p>公众号还会定期发布视频教程</p>
              </div>
              <div style="height:400px;text-align:center">
                <img src="~/imgs/WTM-Ali.png" width="300" height="300" /><br />
                如果WTM帮助到了你，那就赞助点<br />
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
<script>
  $("#frontpage").parent().css("background-color", "#eee");
  $("#frontpage").parent().css("overflow", "scroll");

  $.get("/Home/GetGithubInfo", function (r) {
    $("#githubstar").html(r.stargazers_count);
    $("#githubstars").html(r.stargazers_count);
    $("#githubfork").html(r.forks_count);
    $("#githubwatch").html(r.subscribers_count);
    $("#githubissue").html(r.open_issues_count);
  });

  //区块轮播切换
  layui.use(['admin', 'carousel', 'table'], function () {
    var $ = layui.$
      , admin = layui.admin
      , table = layui.table
      , carousel = layui.carousel
      , element = layui.element
      , device = layui.device();

    //轮播切换
    $('.layadmin-carousel').each(function () {
      var othis = $(this);
      carousel.render({
      elem: this
        , width: '100%'
        , arrow: 'none'
        , interval: othis.data('interval')
        , autoplay: othis.data('autoplay') === true
        , trigger: (device.ios || device.android) ? 'click' : 'hover'
        , anim: othis.data('anim')
      });
    });

    element.render('progress');

    var compareFunc = function (p){ //这是比较函数
      return function(m,n){
        var a = m[p.field];
        var b = n[p.field];
        if(p.type==='desc'){
          return a > b?-1:1; // 降序
        }
        else{
          return a > b?1:-1; //升序
        }
      }
    }
    const tableIns = table.render({
    elem: '#WTM-donate'
      , id: 'WTM-donate'
      , url: '/json/donate.js'
      , page: true
      , autoSort: true
      , totalRow: true
      , cols: [[
        { type: 'numbers', fixed: 'left' }
        , { field: 'date', title: '日期', width: 120, sort: true }
        , { field: 'name', title: '姓名', width: 150, sort: true }
        , { field: 'amount', title: '金额', width: 120, totalRow: true, sort: true, templet:'<div><i class="_wtmicon _wtmicon-renminbi">{{ d.amount }}</i></div>' }
        , { field: 'from', title: '来源', width: 80 }
        , { field: 'comment', title: '留言' }
      ]]
      , parseData: function(res){
        var list = res.Data;
        if(this.initSort){
          list = list.sort(compareFunc(this.initSort))
        }
        var pageIndex = this.page.curr===undefined?1:this.page.curr;
        var result = list.slice(this.limit*(pageIndex-1),this.limit*pageIndex);
        return {
          "Code": 200,
                "Msg":"",
                "Count": res.Data.length,
                "Data": result
              }
      }
      , skin: 'line'
      , height: 840
      ,initSort: {
      field: 'date'
        ,type: 'desc'
      }
    });
    table.on('sort(WTM-donate)', function(obj){
      table.reload('WTM-donate',{initSort: obj});
    });
  });

</script>
